<template>
  <div class="userDiv">
    <div class="icon">
      <img src="../assets/toux.jpeg" width="70px" height="70px"/><span style="">{{userInfo.realname}}</span>
    </div>
    <div class="score">
      <span style="width: 30%">本周练习:{{practice.weekNum}}</span>
      <span>&nbsp;|&nbsp;</span>
      <span>正确:{{practice.rightNum}}</span>
      <span>&nbsp;|&nbsp;</span>
      <span>正确率:{{practice.rightPrecent}}%</span></div>
    <div style="margin-top: 10px" v-if="userInfo.isAdmin==1">管理员</div>
    <div style="margin-top: 10px" v-if="userInfo.isAdmin==0">普通用户</div>
    <div class="region">
      <div style="margin-top: 10px">技术栈</div>
      <div style="color: #aeaeae;font-size: 12px;">
        <div v-for="item in skillStacks">
          {{item.key|statusFilter}}
          <el-progress :percentage="item.value"></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        skillStacks: [],
        practice: {},
        userInfo: {}
      }
    },
    created() {
      this.getUser();
      this.getDate();
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'java',
          2: '数据库',
          3: 'HTML',
          4: 'python'
        }
        return statusMap[status]
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      },
      getDate() {
        var _self = this;
        var username = this.$store.state.username;
        let url = 'login/stastic';
        _self.$http.get(url, {params: {username: username}})
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              console.log(_data)
              _self.skillStacks = _data.data.skillStack
              _self.practice = _data.data.practice
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      getUser() {
        var _self = this;
        let url = 'login';
        let _username = this.$store.state.username;
        _self.$http.get(url, {params: {username: _username}})
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              _self.userInfo = _data.data;
            } else {
              alert(_data.data);
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
    },
    computed: {}
  }
</script>
<style>
  .userDiv {
    width: 20%;
    height: 500px;
    float: right;
    margin-right: 5%;
    margin-top: 3%;
    background-color: #FFFFFF;
    display: block;
  }

  .icon {
    /*width: 70px;*/
    /*height: 70px;*/
    /*background-color: red;*/
    margin-bottom: 10px;
  }

  .score {
    font-size: 12px;
    color: #aeaeae;
  }
</style>
